<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>景点列表</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

  <style>
    /* 基础样式设置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #333;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #45a049;
    }

    .section-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
      color: #2c3e50;
      position: relative;
      padding-bottom: 15px;
    }

    .section-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background-color: #4CAF50;
    }

    /* 头部样式 */
    header {
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #4CAF50;
    }

    .logo span {
      color: #2c3e50;
    }

    nav ul {
      display: flex;
    }

    nav ul li {
      margin-left: 20px;
    }

    nav ul li a {
      padding: 5px 10px;
      transition: color 0.3s;
    }

    nav ul li a:hover {
      color: #4CAF50;
    }

    .auth-buttons {
      display: flex;
      gap: 10px;
    }

    .auth-buttons .btn {
      padding: 8px 15px;
    }

    .btn-login {
      background-color: transparent;
      color: #4CAF50;
      border: 1px solid #4CAF50;
    }

    .btn-login:hover {
      background-color: #4CAF50;
      color: white;
    }

    /* 主内容区域 */
    .main-content {
      padding: 30px 0;
    }

    .page-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 32px;
      color: #2c3e50;
      position: relative;
      padding-bottom: 15px;
    }

    .page-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 3px;
      background-color: #4CAF50;
    }

    /* 筛选区域样式 */
    .filter-section {
      background-color: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      margin-bottom: 25px;
    }

    .filter-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .filter-title i {
      margin-right: 10px;
      color: #4CAF50;
    }

    .filter-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
    }

    .filter-group {
      display: flex;
      align-items: center;
      margin-right: 25px;
    }

    .filter-label {
      margin-right: 12px;
      font-weight: bold;
      color: #555;
      min-width: 80px;
      white-space: nowrap;
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filter-option {
      padding: 8px 16px;
      border: 1px solid #ddd;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;
    }

    .filter-option:hover {
      border-color: #4CAF50;
      color: #4CAF50;
      transform: translateY(-2px);
    }

    .filter-option.active {
      background-color: #4CAF50;
      color: white;
      border-color: #4CAF50;
      box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .filter-reset {
      margin-left: auto;
    }

    .filter-reset-btn {
      color: #888;
      cursor: pointer;
      padding: 8px 16px;
      border: 1px solid #ddd;
      border-radius: 20px;
      transition: all 0.3s;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    .filter-reset-btn i {
      margin-right: 5px;
    }

    .filter-reset-btn:hover {
      color: #4CAF50;
      border-color: #4CAF50;
      background-color: rgba(76, 175, 80, 0.1);
    }

    /* 景点列表区域 */
    .scenic-list-section {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 25px;
    }

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .list-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    .result-count {
      color: #888;
      font-size: 14px;
    }

    /* 景点网格布局 - 优化为每项更大更清晰 */
    .scenic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
      gap: 25px;
    }

    .scenic-card {
      border: 1px solid #ebeef5;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s;
      cursor: pointer;
      background: white;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }

    .scenic-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .scenic-image-container {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
    }

    .scenic-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }

    .scenic-card:hover .scenic-image {
      transform: scale(1.05);
    }

    .scenic-info {
      padding: 20px;
    }

    .scenic-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 12px;
      color: #333;
      line-height: 1.3;
    }

    .scenic-level {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .scenic-type {
      padding: 4px 10px;
      background-color: rgba(76, 175, 80, 0.1);
      color: #4CAF50;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
    }

    .info-item {
      margin-bottom: 10px;
      display: flex;
      font-size: 14px;
    }

    .info-label {
      width: 70px;
      color: #888;
      flex-shrink: 0;
    }

    .info-content {
      flex: 1;
      color: #666;
    }

    /* 详情页样式 */
    .detail-container {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 25px;
    }

    .back-button {
      margin-bottom: 25px;
    }

    .scenic-header {
      display: flex;
      gap: 30px;
      margin-bottom: 30px;
    }

    @media (max-width: 768px) {
      .scenic-header {
        flex-direction: column;
      }
    }

    .detail-image {
      flex: 0 0 400px;
      border-radius: 8px;
      overflow: hidden;
    }

    .detail-image img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .scenic-basic-info {
      flex: 1;
    }

    .section-title {
      font-size: 22px;
      font-weight: bold;
      margin: 30px 0 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #4CAF50;
      color: #2c3e50;
    }

    .scenic-description {
      line-height: 1.8;
      text-align: justify;
      color: #555;
      font-size: 16px;
    }

    /* 空状态样式 */
    .empty-state {
      text-align: center;
      padding: 60px 0;
      color: #999;
    }

    .empty-state i {
      font-size: 60px;
      margin-bottom: 15px;
      color: #ddd;
    }

    .empty-state p {
      font-size: 16px;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .header-container {
        flex-direction: column;
        gap: 15px;
      }

      nav ul {
        justify-content: center;
        flex-wrap: wrap;
      }

      .scenic-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .scenic-grid {
        grid-template-columns: 1fr;
      }

      .filter-container {
        flex-direction: column;
        align-items: flex-start;
      }

      .filter-reset {
        margin-left: 0;
        margin-top: 15px;
      }
    }

    /* 添加鼠标指针样式，表示可点击 */
    .spot-item, .scenic-card {
      cursor: pointer;
    }
    
    /* 页脚样式 */
    html, body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex: 1 0 auto;
    }

    footer {
      background-color: #2c3e50;
      color: white;
      padding: 60px 0 20px;
      flex-shrink: 0;
    }

    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }

    .footer-column h3 {
      margin-bottom: 20px;
      font-size: 18px;
    }

    .footer-column ul li {
      margin-bottom: 10px;
    }

    .footer-column ul li a:hover {
      color: #4CAF50;
    }

    .social-icons {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }

    .social-icons a {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      transition: background-color 0.3s;
    }

    .social-icons a:hover {
      background-color: #4CAF50;
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 14px;
    }
  </style>
</head>
<body>
<main>
<!-- 头部导航 -->
<header>
  <div class="container header-container">
    <div class="logo">
      <a href="index.html">探索<span>世界</span></a>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="scenic.html">景区</a></li>
        <li><a href="dot.html" style="color: #4CAF50; font-weight: bold;">景点</a></li>
        <li><a href="order.html">订单</a></li>
        <li><a href="guide.html">攻略</a></li>
        <li><a href="notes.html" >游记</a></li>
      </ul>
    </nav>
    <div class="auth-buttons" id="authButtons">
      <!-- 登录状态由JavaScript动态生成 -->
    </div>
  </div>
</header>

<div class="container main-content">
  <h1 class="page-title">探索精彩景点</h1>

  <div id="app">
    <transition name="fade" mode="out-in">
      <!-- 列表页 -->
      <div v-if="!showDetail">
        <!-- 筛选区域 -->
        <div class="filter-section">
          <div class="filter-title">
            <i class="el-icon-filter"></i>
            筛选条件
          </div>
          <div class="filter-container">
            <div class="filter-group">
              <div class="filter-label">景区名称:</div>
              <div class="filter-options">
                <div
                        class="filter-option"
                        :class="{ active: filter.scenicId === scenic.scenicId }"
                        @click="toggleFilter('scenicId', scenic.scenicId)"
                        v-for="scenic in scenics"
                        :key="scenic.scenicId"
                >{{ scenic.scenicName }}</div>
              </div>
            </div>
            <div class="filter-reset">
              <div class="filter-reset-btn" @click="resetFilter">
                <i class="el-icon-refresh"></i>
                重置筛选
              </div>
            </div>
          </div>
        </div>

        <!-- 景点列表区域 -->
        <div class="scenic-list-section">
          <div class="list-header">
            <div class="list-title">景点列表</div>
            <div class="result-count">共找到 {{filteredDots.length}} 个景点</div>
          </div>

          <div class="scenic-grid">
            <div
                    class="scenic-card"
                    v-for="dot in filteredDots"
                    :key="dot.dotId"
                    @click="viewDetail(dot.dotId)"
            >
              <div class="scenic-image-container">
                <img
                        :src="getImageUrl(dot.dotPic)"
                        :alt="dot.dotName"
                        class="scenic-image"
                        @error="handleImageError"
                >
              </div>
              <div class="scenic-info">
                <div class="scenic-name">{{ dot.dotName }}</div>
                <div class="info-item">
                  <span class="info-label">位置：</span>
                  <span class="info-content">{{ dot.dotAddress || '未知' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">简介：</span>
                  <span class="info-content">{{ dot.dotSummary || '暂无简介' }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 无数据提示 -->
          <div v-if="filteredDots.length === 0" class="empty-state">
            <i class="el-icon-search"></i>
            <p>暂无符合条件的景点，请尝试其他筛选条件</p>
          </div>
        </div>
      </div>

      <!-- 详情页 -->
      <div v-else class="detail-container">
        <el-button class="back-button" icon="el-icon-arrow-left" @click="goBack">返回列表</el-button>

        <!-- 景点基本信息 -->
        <div class="scenic-header" v-if="currentDot">
          <div class="detail-image">
            <img
                    :src="getImageUrl(currentDot.dotPic)"
                    :alt="currentDot.dotName"
                    @error="handleDetailImageError"
            >
          </div>
          <div class="scenic-basic-info">
            <h1 class="scenic-name">{{ currentDot.dotName }}</h1>
            <div class="info-item">
              <span class="info-label">位置：</span>
              <span class="info-content">{{ currentDot.dotAddress || '未知' }}</span>
            </div>
          </div>
        </div>

        <!-- 景点详细介绍 -->
        <div class="section-title">景点介绍</div>
        <div class="scenic-description" v-if="currentDot">
          {{ currentDot.dotSummary || '暂无详细介绍' }}
        </div>
      </div>
    </transition>
  </div>
</div>

</main>
<!-- 页脚 -->
<footer>
        <div class="copyright">
            <p>© 2023 探索世界旅游网 版权所有</p>
        </div>
</footer>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        dots: [],
        filteredDots: [],
        currentDot: null,
        showDetail: false,
        filter: {
          scenicId: null
        },
        scenics: [] // 存储景区列表
      };
    },
    mounted() {
      this.fetchScenicList(); // 获取景区列表
      this.fetchDotList();
      // 检查URL参数，如果包含dotId则直接显示详情
      const urlParams = new URLSearchParams(window.location.search);
      const dotId = urlParams.get('dotId');
      if (dotId) {
        this.viewDetail(dotId);
      }
    },
    methods: {
      // 获取景区列表数据
      fetchScenicList() {
        axios.get('/scenic/frontQueryAll')
                .then(response => {
                  if (response.data.code === 200) {
                    this.scenics = response.data.data || [];
                  } else {
                    this.$message.error(response.data.msg || '获取景区列表失败');
                  }
                })
                .catch(error => {
                  this.$message.error('请求失败: ' + error.message);
                });
      },

      // 获取景点列表数据
      fetchDotList() {
        // 创建模拟分页对象
        const pageData = {
          pageNo: 1,
          pageSize: 100,
          data: {}
        };

        axios.post('/dot/frontQueryByPage', pageData)
                .then(response => {
                  if (response.data.code === 200) {
                    // 对后端数据进行映射处理
                    this.dots = (response.data.data.list || []).map(item => {
                      return {
                        ...item
                      };
                    });
                    this.filteredDots = this.dots;
                    this.applyFilter(); // 应用初始筛选
                  } else {
                    this.$message.error(response.data.msg || '获取景点列表失败');
                    this.useMockData();
                  }
                })
                .catch(error => {
                  this.$message.error('请求失败: ' + error.message);
                  this.useMockData();
                });
      },

      // 使用模拟数据（当API不可用时）
      useMockData() {
        this.dots = [
          {
            dotId: 1,
            scenicId: 1,
            dotName: "观景台",
            dotPic: "https://source.unsplash.com/800x600/?viewpoint",
            dotAddress: "山顶区域",
            dotSummary: "这里是景区最佳的观景点，可以俯瞰整个山谷和远处的群山，尤其在日出和日落时分景色最为壮观。"
          },
          {
            dotId: 2,
            scenicId: 1,
            dotName: "古寺",
            dotPic: "https://source.unsplash.com/800x600/?temple",
            dotAddress: "山腰区域",
            dotSummary: "这座古寺建于明代，已有500多年历史，寺内保存完好的佛像和壁画具有很高的艺术价值和历史价值。"
          },
          {
            dotId: 3,
            scenicId: 2,
            dotName: "游乐园",
            dotPic: "https://source.unsplash.com/800x600/?amusement",
            dotAddress: "入口区域",
            dotSummary: "家庭娱乐的好去处，拥有多种适合不同年龄段的游乐设施，包括旋转木马、碰碰车和小型过山车等。"
          },
          {
            dotId: 4,
            scenicId: 3,
            dotName: "特色小吃街",
            dotPic: "https://source.unsplash.com/800x600/?food",
            dotAddress: "中心区域",
            dotSummary: "汇集了当地各种特色小吃和手工艺品，是体验本地文化和购买纪念品的理想场所。"
          }
        ];
        this.filteredDots = this.dots;
      },

      // 处理图片URL
      getImageUrl(url) {
        if (!url) return '/images/default-image.jpg';
        if (url.startsWith('http')) return url;
        return url.startsWith('/') ? url : '/' + url;
      },

      // 图片加载错误处理
      handleImageError(event) {
        event.target.src = '/images/default-image.jpg';
      },

      // 详情图片加载错误处理
      handleDetailImageError(event) {
        event.target.src = '/images/default-image.jpg';
      },

      // 查看详情
      viewDetail(dotId) {
        axios.get(`/dot/queryById?dotId=${dotId}`)
                .then(response => {
                  if (response.data.code === 200) {
                    this.currentDot = response.data.data;
                    this.showDetail = true;
                  } else {
                    this.$message.error(response.data.msg || '获取景点信息失败');
                    // 使用列表中的数据进行展示
                    const dot = this.dots.find(d => d.dotId === dotId);
                    if (dot) {
                      this.currentDot = dot;
                      this.showDetail = true;
                    }
                  }
                })
                .catch(error => {
                  this.$message.error('请求失败: ' + error.message);
                  // 使用列表中的数据进行展示
                  const dot = this.dots.find(d => d.dotId === dotId);
                  if (dot) {
                    this.currentDot = dot;
                    this.showDetail = true;
                  }
                });
      },

      // 返回列表页
      goBack() {
        this.showDetail = false;
        this.currentDot = null;
      },

      // 切换筛选条件
      toggleFilter(filterType, value) {
        // 如果点击已选中的选项，则取消选择
        if (this.filter[filterType] === value) {
          this.filter[filterType] = null;
        } else {
          this.filter[filterType] = value;
        }
        this.applyFilter();
      },

      // 应用筛选条件
      applyFilter() {
        this.filteredDots = this.dots.filter(dot => {
          // 景区ID筛选
          if (this.filter.scenicId && dot.scenicId !== this.filter.scenicId) {
            return false;
          }

          return true;
        });
      },

      // 重置筛选
      resetFilter() {
        this.filter = {
          scenicId: null
        };
        this.filteredDots = this.dots;
      }
    }
  });
  // 检查登录状态并更新导航栏
  function updateAuthButtons() {
    const authButtons = document.getElementById('authButtons');
    const cid = localStorage.getItem('cid');
    const userInfoStr = localStorage.getItem('userInfo');

    if (cid && userInfoStr) {
      // 用户已登录，显示个人中心和退出登录
      try {
        const userInfo = JSON.parse(userInfoStr);
        authButtons.innerHTML = `
                  <span style="margin-right: 15px; color: #4CAF50;">欢迎，${userInfo.visitorsName || userInfo.realName || '用户'}</span>
                  <a href="profile.html" class="btn">个人中心</a>
                  <a href="#" class="btn btn-login" onclick="logout()">退出登录</a>
              `;
      } catch (e) {
        // 解析用户信息失败，显示默认登录状态
        authButtons.innerHTML = `
                  <a href="login.html" class="btn btn-login">登录</a>
                  <a href="register.html" class="btn">注册</a>
              `;
      }
    } else {
      // 用户未登录，显示登录注册按钮
      authButtons.innerHTML = `
              <a href="login.html" class="btn btn-login">登录</a>
              <a href="register.html" class="btn">注册</a>
          `;
    }
  }

  // 通用的退出登录函数（用于导航栏）
  function logout() {
    if (confirm('确定要退出登录吗？')) {
      // 清除本地存储的用户信息
      localStorage.removeItem('cid');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('token');

      // 更新导航栏显示
      updateAuthButtons();

      // 延迟跳转到首页
      setTimeout(() => {
        window.location.href = 'index.html';
      }, 500);
    }
    return false; // 阻止链接默认行为
  }

  // 页面加载时更新导航栏状态
  document.addEventListener('DOMContentLoaded', function() {
    updateAuthButtons();
  });
</script>
</body>
</html>